//初始化数据
var hashA = init()
var keys = hashA['keys']
var hash = hashA['hash']

//生成键盘
generateKeyboard(keys,hash)

//监听用户动作
listenTouser(hash)

//函数本体
function getFromLocalStorage(name){
    return JSON.parse(localStorage.getItem(name) || 'null')
}

function tag(tagName){
    return document.createElement(tagName)
}

function createSpan(textContent){
    var span = tag('span')
    span.textContent = textContent
    span.className = 'text'
    return span
}
function createButton(id){
    var Button = tag('button')
    Button.textContent = '编辑'
    Button.id = id
    Button.onclick = function(zzzz){
        var button2 = zzzz['target']
        var img2 = button2.previousSibling
        var key = button2['id']
        var x = prompt('需要一个网址')
        hash[key] = x //hash变更
        img2.src = 'http://'+x + '/favicon.ico'
        img2.onerror = function(xxx){
            xxx.target.src = '//i.loli.net/2017/11/10/5a05afbc5e183.png'
        }
        localStorage.setItem('zzz'.JSON.stringify(hash))
    }     
    return Button
}

function createImage(domain){
    var img = tag('img')
    if(domain){
        img.src = 'http://'+domain+'/favicon.ico'
    }else{
        img.src = '//i.loli.net/2017/11/10/5a05afbc5e183.png'
    }
    img.onerror = function(xxx){
        xxx.target.src = '//i.loli.net/2017/11/10/5a05afbc5e183.png'
    }
    return img
}
function init(){
    var keys = {
        '0': {0:'q',1:'w',2:'e',3:'r',4:'t',5:'y',6:'u',7:'i',8:'o',9:'p',length:10},
        '1': {0:'a',1:'s',2:'d',3:'f',4:'g',5:'h',6:'j',7:'k',8:'l',length:9},
        '2': {0:'z',1:'x',2:'c',3:'v',4:'b',5:'n',6:'m',length:7},
        'length': 3
    }
    var hash = {'q': 'qq.com', 'w': 'weibo.com', 'e': 'ele.me', 'r': 'renren.com', 't': 'tianya.com', 'y': 'youtube.com', 'u': 'uc.com' , 'i': 'iqiyi.com', 'o': 'opera.com', 'p': undefined, 'a': 'acfun.tv', 's': 'sohu.com', 'z': 'zhihu.com', 'm': 'www.mcdonalds.com.cn'
    }
    // 取出 localStorage 中的 zzz 对应的 hash
    var hashInLocalStorage = getFromLocalStorage('zzz') 
    if(hashInLocalStorage){
        hash = hashInLocalStorage
    }
    return {
        "keys": keys,
        "hash": hash
    }
}
function generateKeyboard(keys,hash){
    for(var index=0; index< keys['length'];index = index+1){
            var div = tag('div')
            div.className = 'row'
            main.appendChild(div)
            var row = keys[index]
            for(var index2=0;index2< row['length'];index2 =index2+1){
            var span = createSpan(row[index2])
            var button = createButton(row[index2])
            var img = createImage(hash[row[index2]])
            var kbd = tag('kbd')
            kbd.className = 'key'
            kbd.appendChild(span)
            kbd.appendChild(img)
            kbd.appendChild(button)
            div.appendChild(kbd)
            }
        }
}
function listenTouser(hash){
    document.onkeypress =function(zzzz){
        var key = zzzz['key']
        var website = hash[key]
        window.open('http://'+website,'_blank')
    }
}